import React from 'react'
//引入样式
import '../../asset/css/home/storeInfo.css'
//创建组件
class StoreInfo extends React.Component {
    componentDidMount() {
        this.props.getStoreList();
    }
    render() {
        let { storeList } = this.props;
        console.log(storeList)
        return (

            <ul>
                {storeList.map((item, index) =>

                    <li key={index}>

                        <div className='storeInfo'>
                            {/*商家信息*/}
                            <div className='storeImf'>

                                <div className='storeImg'>
                                    <img src="https://fuss10.elemecdn.com/f/1e/793f3c51ff79f895c57c97bacdc57jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="" />
                                </div>

                                <div className='storeDetail'>

                                    <div className='storeTitle'>
                                        <div className='storeTitle_left'>
                                            <span style={item.isBrand ? { background: 'yellwo' } : { background: '#0085ff', color: '#fff' }}>{item.isBrand ? '品牌' : '普通'}</span>
                                            <span>{item.name}</span>
                                        </div>

                                        <div className='storeTitle_right'>
                                            ···
                              </div>
                                    </div>

                                    <div className='saleNum'>
                                        <div className='saleNum_left'>
                                            <span>{item.scores}</span>
                                            <span>月售{item.sale}单</span>
                                        </div>

                                        <div className='saleNum_right' style={item.fengniao ? { background: '#0085ff' } : { background: '#999' }}>
                                            {item.fengniao ? '蜂鸟专送' : '自取'}
                                        </div>
                                    </div>

                                    <div className='saleService'>

                                        <div className='saleService_left'>
                                            <span>{item.startPay}</span>
                                            <span>|</span>
                                            <span>{item.deliverPay}</span>
                                        </div>

                                        <div className='saleService_right'>
                                            <span>{item.journey}</span>
                                            <span>|</span>
                                            <span>{item.time}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/*商家活动*/}
                            <div className='storeAction' style={item.activities ? { display: 'block' } : { display: 'none' }}>

                                <div className='storeActionLeft'></div>

                                <div className='storeActionRight'>
                                    <div className='storeActionName'>
                                        <span>{item.name}</span>
                                    </div>

                                    <div className='storeActionList'>
                                        {item.activities ? item.activities.map((items, indexs) => {
                                            return (

                                                <li key={indexs}>
                                                    <div>
                                                        <span className='storeActionIcon'>{items.key}</span>
                                                        <span className='epliTxt'>{items.text}</span>
                                                    </div>
                                                </li>
                                            )
                                        }
                                        ) : ""}

                                    </div>
                                </div>
                            </div>
                        </div>

                    </li>

                )}

            </ul>



            // <div className='storeInfo'>
            //     {/*商家信息*/}
            //     <div className='storeImf'>

            //         <div className='storeImg'>
            //             <img src="https://fuss10.elemecdn.com/f/1e/793f3c51ff79f895c57c97bacdc57jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="" />
            //         </div>

            //         <div className='storeDetail'>

            //             <div className='storeTitle'>
            //                 <div className='storeTitle_left'>
            //                     <span>品牌</span>
            //                     <span>沙县小吃(河西万达F座店)</span>
            //                 </div>

            //                 <div className='storeTitle_right'>
            //                     ···
            //            </div>
            //             </div>

            //             <div className='saleNum'>
            //                 <div className='saleNum_left'>
            //                     <span>4.7</span>
            //                     <span>月售152单</span>
            //                 </div>

            //                 <div className='saleNum_right'>
            //                     蜂鸟专送
            //                 </div>
            //             </div>

            //             <div className='saleService'>

            //                 <div className='saleService_left'>
            //                     <span>¥20起送</span>
            //                     <span>|</span>
            //                     <span>配送费¥3.5</span>
            //                 </div>

            //                 <div className='saleService_right'>
            //                     <span>383m</span>
            //                     <span>|</span>
            //                     <span>20分钟</span>
            //                 </div>
            //             </div>
            //         </div>
            //     </div>
            //     {/*商家活动*/}
            //     <div className='storeAction'>
            //         <div className='storeActionLeft'></div>

            //         <div className='storeActionRight'>
            //             <div className='storeActionName'>
            //                 <span>沙县小吃</span>
            //             </div>

            //             <div className='storeActionList'>

            //                     <li>
            //                         <div>
            //                             <span className='storeActionIcon'>减</span>
            //                             <span className='epliTxt'>满25减3，满45减5，满60减7</span>

            //                         </div>


            //                         <div>
            //                             <span>4个活动</span>
            //                             <img src={require('../../asset/icon/icon_sanjiaoxing.png')} alt=""/>
            //                         </div>
            //                     </li>


            //                     <li>
            //                         <div>
            //                             <span className='storeActionIcon'>新</span>
            //                             <span className='epliTxt'>本店新用户立减2元</span>
            //                         </div>

            //                     </li>

            //                     <li>
            //                         <div>
            //                             <span className='storeActionIcon'>首</span>
            //                             <span className='epliTxt'>新用户下单立减15元</span>
            //                         </div>
            //                     </li>

            //                     <li>
            //                         <div>
            //                             <span className='storeActionIcon'>保</span>
            //                             <span className='epliTxt'>该商户食品安全已由国泰产险承担，食品安全有保障</span>
            //                         </div>
            //                     </li>

            //             </div>
            //         </div>
            //     </div>
            // </div>

        )
    }
}
//暴露出去
export default StoreInfo 